<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :lg="24" :xs="24" class="mb-[12px]">
        <el-card style="min-width: 480px">
          <el-form
            ref="requirementFormRef"
            :model="requirmentData"
            label-width="100px"
            disabled="true"
          >
            <el-form-item label="标题" prop="title">
              <el-input v-model="requirmentData.title" />
            </el-form-item>

            <el-form-item label="需求描述" prop="description">
              <el-input v-model="requirmentData.description" :rows="5" type="textarea" />
            </el-form-item>

            <el-form-item label="需求提出人" prop="userName">
              <el-input v-model="requirmentData.userName" />
            </el-form-item>

            <el-form-item label="需求提出部门" prop="departmentName">
              <el-input v-model="requirmentData.departmentName" />
            </el-form-item>

            <el-form-item label="需求提出时间" prop="createTime">
              <el-input v-model="requirmentData.createTime" />
            </el-form-item>

            <el-form-item label="附件" prop="attachments">
              <span v-for="(attachment, index) in fileList">
                <p style="padding-left: 10px;"><a :href="attachment.url" target="_blank" style="text-decoration:underline;">{{ attachment.name }}</a></p>
              </span>
            </el-form-item>
          </el-form>
        </el-card>

        <el-card style="min-width: 480px" v-for="(examine, index) in examineList">
          <el-form
            label-width="100px"
            disabled="true"
          >
            <el-form-item label="审批意见" prop="examineStatus">
              <el-input :value="examine.examineStatus == 1 ? '通过' : '驳回'" />
            </el-form-item>

            <el-form-item label="意见明细" prop="content">
              <el-input :value="examine.content" />
            </el-form-item>

            <el-form-item label="审批人" prop="userName">
              <el-input v-model="examine.userName" />
            </el-form-item>

            <el-form-item label="审批时间" prop="createTime">
              <el-input v-model="examine.createTime" />
            </el-form-item>
          </el-form>
        </el-card>

        <flowHistory :flowId="route.query.flowId ? route.query.flowId : 0" :workId="route.query.workId ? route.query.workId : 0" />
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "RequirementDetails",
  inheritAttrs: false,
});

import flowHistory from '../../work/backlog/components/flowHistory.vue';
import RequirementAPI, { RequirementData } from "@/api/requirement";
import ExamineAPI, { ExamineData, ExamineDataVO } from "@/api/examine";
import router from "@/router";
import WorkAPI from "@/api/work";

const route = useRoute();
const requirmentFormRef = ref(ElForm);
const examineFormRef = ref(ElForm);

// 需求表单
const requirmentData = reactive<RequirementData>({
  id: null,
  title: '',
  description: '',
  attachments: '',
  userName: '',
  departmentName: '',
  createTime: '',
});

const fileList = ref<UploadUserFile[]>([])

const examineList = ref<ExamineDataVO[]>([])
onMounted(() => {
  if (route.query.id){
    RequirementAPI.getById(route.query.id).then(({data}) => {
      if (data){
        requirmentData.id = data.id;
        requirmentData.title = data.title;
        requirmentData.description = data.description;
        requirmentData.userName = data.userName;
        requirmentData.departmentName = data.departmentName;
        requirmentData.attachments = data.attachments;
        requirmentData.createTime = data.createTime;
        if (requirmentData.attachments){
          let files = JSON.parse(requirmentData.attachments);
          for(let i = 0; i < files.length; i++){
            fileList.value.push({name: files[i]["name"], url: files[i]["url"]});
          }
        }
      }
    })
  }
  else if (route.query.workId){
    RequirementAPI.getByWorkId(route.query.workId).then(({data}) => {
      if (data){
        requirmentData.id = data.id;
        requirmentData.title = data.title;
        requirmentData.description = data.description;
        requirmentData.userName = data.userName;
        requirmentData.departmentName = data.departmentName;
        requirmentData.attachments = data.attachments;
        requirmentData.createTime = data.createTime;
        if (requirmentData.attachments){
          let files = JSON.parse(requirmentData.attachments);
          for(let i = 0; i < files.length; i++){
            fileList.value.push({name: files[i]["name"], url: files[i]["url"]});
          }
        }
      }
    })

    ExamineAPI.getByWorkId(route.query.workId).then(({data}) => {
      if (data){
        for(let i = 0; i < data.length; i++){
          let examine = reactive<ExamineDataVO>({ });
          examine.id = data[i].id;
          examine.examineStatus = data[i].examineStatus;
          examine.content = data[i].content;
          examine.userName = data[i].userName;
          examine.createTime = data[i].createTime;
          examineList.value.push(examine);
        }
      }
    })
  }
});
</script>
